<script setup>
import { useDataStore } from '@/stores/data'

const data = useDataStore()

     
function yearChange(e) {
    console.log(e.target.value)
    data.setYear(e.target.value)
}
function monthChange(e) {
    console.log(e.target.value)
    data.setMonth(e.target.value)
}

function lastmonth() {
  data.prevMonth()
}

function nextmonth() {
    data.nextMonth()
}

</script>
<template>
    <div class="cal-button">

        <div>
            <select class="year-select" @change="yearChange">
                <option v-for="item in 151" :selected="item + 1899 ===data.year" :value="item + 1899">{{ item + 1899 }}年
                </option>
            </select>
            <span @click="lastmonth">&lt;</span>
            <select class="month-select" @change="monthChange">
                <option v-for="item in 12" :selected="item=== data.month" :value="item">{{ item  }}月</option>
            </select>
            <span @click="nextmonth">&gt;</span>
        </div>

        <button class="today" @click="data.toToday">返回今天</button>
    </div>
</template>
<style scoped lang="scss">
.cal-button {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    background-color: #f5f5f5;
    border-radius: 5px;

    .year-select,
    .month-select {
        color: #333;
        padding: 4px 10px;
        border: 1px solid #eee;
        border-radius: 6px;
    }

    span {
        user-select: none;
        cursor: pointer;
    }

    .today {
        padding: 4px 20px;
        border: none;
        background-color: #fff;
        border-radius: 6px;

        &:hover {
            background: rgba(78, 110, 242, 0.1);
            color: #4e6ef2;
            cursor: pointer;
        }
    }
}
</style>
